<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<div id="userGrid"></div>
<div id="userToolbar">
	<div>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.showAddDialog();" data-options="
		iconCls:'icon-add',
		plain:true">
			新增
		</a>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.showUpdateDialog();" data-options="
		iconCls:'icon-edit',
		plain:true">
			修改
		</a>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.remove();" data-options="
		iconCls:'icon-remove',
		plain:true">
			删除
		</a>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.open();" data-options="
		iconCls:'icon-lock-open',
		plain:true">
			启用
		</a>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.close();" data-options="
		iconCls:'icon-locks',
		plain:true">
			禁用
		</a>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.resetPassword();" data-options="
		iconCls:'icon-man',
		plain:true">
			重置密码
		</a>
		<a href="#" class="easyui-linkbutton" onclick="user.toolbar.redo();" data-options="
		iconCls:'icon-redo',
		plain:true">
			取消
		</a>
	</div>
	<div>
		<strong>姓名：</strong>
		<input type="text" name="name" id="nameSearch" class="easyui-textbox"/>
		
		<strong>角色：</strong>
		<select name="role" id="roleSearch" style="width:100px">
		</select>
		
		<strong>班级：</strong>
		<select name="clazz" id="clazzSearch" style="width:100px">
		</select>
		
		<strong>状态：</strong>
		<select name="state" class="easyui-combobox" id="stateSearch" style="width:100px">
			<option value="1">已启用</option>
			<option value="2">已禁用</option>
			<option value="3">已删除</option>
			<option value="">全部</option>
		</select>
		<a href="#" onclick="user.toolbar.search();" class="easyui-linkbutton" data-options="
		iconCls:'icon-search',
		plain:true">
			查询
		</a>
	</div>
</div>

<div id="userAddDialog" class="easyui-dialog user-add ec-dialog" data-options="
title:'新增用户',
buttons:'#userAddButtons',
iconCls:'icon-man',
plain:true,
closed: true,
onClose:user.toolbar.resetAddForm">
	<form id="userAddForm" method="post">
		<p>
			<strong>账号：</strong>
			<input type="text" name="code" id="code" class="easyui-textbox" data-options="
			required:true,
			validType:['remote[\'<%=request.getContextPath()%>/stu/UserServlet?command=unique&paramName=code\',\'param\']','code','length[6,12]'],
			missingMessage:'请输入账号',
			invalidMessage:'账号非法或已存在'
			">
		</p>	
		<p>
			<strong>姓名：</strong>
			<input type="text" name="name" class="easyui-textbox" data-options="
			required:true,validType:'name'">
		</p>
		<p>
			<strong>电话：</strong>
			<input type="text" name="phone" class="easyui-textbox" data-options="
			required:true,
			validType:['remote[\'<%=request.getContextPath()%>/stu/UserServlet?command=unique&paramName=phone\',\'param\']','mobile'],
			invalidMessage:'电话非法或已存在'
			">
		</p>
		<p>
			<strong>邮箱：</strong>
			<input type="text" name="email" class="easyui-textbox" data-options="
			required:true,validType:['remote[\'<%=request.getContextPath()%>/stu/UserServlet?command=unique&paramName=email\',\'param\']','email'],
			invalidMessage:'邮箱地址非法或已存在'
			">
		</p>
		<p>
			<strong>性别：</strong>
			<select class="easyui-combobox" name="gender" id="gender" style="width:50px">
			    <option value="1">男</option>
			    <option value="2">女</option>
			</select>
		</p>
		<p>
			<strong>角色：</strong>
			<input class="easyui-textbox" id="role" name="role" style="width:150px" data-options="required:true"/>
		</p>
		<p>
			<strong>班级：</strong>
			<input class="easyui-textbox" id="clazz" name="clazz" style="width:150px" data-options="required:true"/>
		</p>
		<p>
			<strong>备注：</strong>
			<input class="easyui-textbox" id="memo" name="memo" style="width:150px" data-options="multiline:true"/>
		</p>
		
	</form>
</div>
<div id="userAddButtons">
	<a href="#" onclick="user.toolbar.add()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-add',
	plain: true">
		新增
	</a>
	<a href="#" onclick="user.toolbar.hiddenAddDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>

<div id="userUpdateDialog" class="easyui-dialog user-add ec-dialog" data-options="
title: '修改用户',
iconCls: 'icon-edit',
buttons: '#userUpdateButtons',
closed: true,
onClose: user.toolbar.resetUpdateForm">
	<form id="userUpdateForm" method="post">
		<input type="hidden" name="id"/>
		<p>
			<strong>账号：</strong>
			<input type="text" disabled="disabled" name="code" id="code" class="easyui-textbox">
		</p>
		<p>
			<strong>姓名：</strong>
			<input type="text" name="name" class="easyui-textbox" data-options="
			required:true,validType:'name'">
		</p>
		<p>
			<strong>电话：</strong>
			<input type="text" name="phone" class="easyui-textbox" id="phone" onclick="user.toolbar.updateUniquePhone();">
		</p>
		<p>
			<strong>邮箱：</strong>
			<input type="text" name="email" class="easyui-textbox" id="email" onchange="user.toolbar.updateUniqueEmail();">
		</p>
		<p>
			<strong>性别：</strong>
			<select class="easyui-combobox" name="gender" id="gender" style="width:50px">
			    <option value="1">男</option>
			    <option value="2">女</option>
			</select>
		</p>
		<p>
			<strong>角色：</strong>
			<input id="roleUpdate" name="role" style="width:150px"/>
		</p>
		<p>
			<strong>班级：</strong>
			<input id="clazzUpdate" name="clazz" style="width:150px"/>
		</p>
		<p>
			<strong>备注：</strong>
			<input class="easyui-textbox" id="memo" name="memo" style="width:150px" data-options="multiline:true"/>
		</p>
		
	</form>
</div>
<div id="userUpdateButtons">
	<a href="#" onclick="user.toolbar.update()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-edit',
	plain: true">
		修改
	</a>
	<a href="#" onclick="user.toolbar.hiddenUpdateDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>

<script>
	var user = {
			
		init : function() {
			user.userGrid = $('#userGrid');
			user.role = $('#role');
			user.clazz = $('#clazz');
			user.roleUpdate = $('#roleUpdate');
			user.clazzUpdate = $('#clazzUpdate');
			user.userAddDialog = $('#userAddDialog');
			user.code = $('#code');
			user.userAddForm = $('#userAddForm');
			user.userUpdateForm = $('#userUpdateForm');
			user.userUpdateDialog = $('#userUpdateDialog');
			user.roleSearch = $('#roleSearch');
			user.clazzSearch = $('#clazzSearch');
			user.stateSearch = $('#stateSearch');
			user.nameSearch = $('#nameSearch');
			
			user.roleSearch.append("<option value=''>全部</option>");
			user.clazzSearch.append("<option value=''>全部</option>");
			user.roleSearch.combobox({
				 url: '<%=request.getContextPath()%>/stu/UserServlet?command=listRole',
				 valueField:'id',    
				 textField:'name',
				 editable:false
			});
			user.clazzSearch.combobox({
				 url: '<%=request.getContextPath()%>/stu/UserServlet?command=listClass',
				 valueField:'id',    
				 textField:'name',
				 editable:false
			});
			
			user.userGrid.datagrid({
			    url: '<%=request.getContextPath()%>/stu/UserServlet?command=listUser',
			    fitColumns: true,
			    checkOnSelect: true,
			    striped: true,
			    rownumbers: true,
			    pagination: true,
			    pageSize: 10,
			    pageList: [10, 20, 30, 40, 50],
			    pageNumber: 1,
			    sortName: 'u.operate_time',
			    sortOrder: 'desc',
			    toolbar: '#userToolbar',
			    columns:[[
					{field:'id', width:100, checkbox: true},
					{field:'code', title:'帐号', width:100, align:'center'},
					{field:'name', title:'姓名', width:100, align:'center'},
					{field:'sex', title:'性别', width:50, align:'center'},
					{field:'phone', title:'电话', width:100, align:'center'},
					{field:'email', title:'邮箱', width:150, align:'center'},
					{field:'createTime', title:'创建时间', width:100, align:'center'},
					{field:'role__name', title:'角色', width:100, align:'center'},
					{field:'class__name', title:'班级', width:100, align:'center'},
					{field:'state', title:'状态', width:60, align:'center'},
			    ]],
				onDblClickRow: function(rowIndex, rowData) {
					user.toolbar.showUpdateDialog(rowData.id);
				},
				onRowContextMenu : function(e, rowIndex, rowData) {
					e.preventDefault();
					main.clickMenu.menu('show', {
							left : e.pageX,
							top : e.pageY
						}).data("rowDataId", rowData.id);
				},
			});
		},
		toolbar: {
			showCombotree: function() {
				user.role.combobox({
					url: '<%=request.getContextPath()%>/stu/UserServlet?command=listRole',
					valueField:'id',    
				    textField:'name',
				    editable:false
				});
				user.clazz.combotree({
					url: '<%=request.getContextPath()%>/stu/UserServlet?command=listClass',   
				    valueField:'id',    
				    textField:'name',
				    editable:false
				});
			},
			showAddDialog: function() {
				user.toolbar.showCombotree();
				user.userAddDialog.dialog('open');
				user.code.focus();
			},
			hiddenAddDialog: function() {
				user.userAddDialog.dialog('close');
				user.toolbar.resetAddForm();
			},
			resetAddForm: function() {
				user.userAddForm.form('reset');
			},
			add: function() {
				if (user.userAddForm.form('validate')) {
					$.messager.progress({
						text : '正在处理...'
					});
					$.post('<%=request.getContextPath()%>/stu/UserServlet?command=add', user.userAddForm.serialize(), function(data) {
						if (data) {
							$.messager.show({
								title: '系统提示',
								msg: '新增成功！',
								timeout: 3000,
								showType: 'slide'
							});
							user.toolbar.resetAddForm();
							user.userGrid.datagrid('reload');
						} else {
							$.messager.alert('系统提示', '新增失败！', 'error')
						}
						$.messager.progress('close');
						user.toolbar.hiddenAddDialog();
				 	});
				}
			},
			updateUniquePhone : function(){
				$('#phone').validatebox({
				    required: true,
				    validType:['remote[\'<%=request.getContextPath()%>/stu/UserServlet?command=unique&paramName=phone\',\'param\']','mobile'],
					invalidMessage:'电话非法或已存在'
				});
			},
			updateUniqueEmail : function(){
				$('#email').validatebox({
					required:true,
					validType:['remote[\'<%=request.getContextPath()%>/stu/UserServlet?command=unique&paramName=email\',\'param\']','email'],
					invalidMessage:'邮箱地址非法或已存在'
				});
			},
			//显示修改界面
			showUpdateDialog: function(id) {
				var getData = function(v) {
					$.post('<%=request.getContextPath()%>/stu/UserServlet?command=getUser', {id : v}, function(data) {
						if (data) {
							user.roleUpdate.combobox({    
								url: '<%=request.getContextPath()%>/stu/UserServlet?command=listRole',   
							    valueField:'id',    
							    textField:'name',
							    editable:false
							}); 
							user.clazzUpdate.combobox({    
								url: '<%=request.getContextPath()%>/stu/UserServlet?command=listClass',   
							    valueField:'id',    
							    textField:'name',
							    editable:false
							}); 
							user.userUpdateForm.form('load', {
								id: data.id,
								code: data.code,
								name: data.name,
								sex: data.sex,
								phone: data.phone,
								email: data.email,
								role: data.role__id,
								clazz: data.class__id,
								memo: data.memo
							});
							$('#userUpdateDialog').dialog('open');
						} else {
							$.messager.alert('系统提示', '获取信息失败！', 'error')
						}
						//$.messager.progress('close');
					}, 'json');
				}
				if (id) {
					getData(id);
				} else {
					var row = user.userGrid.datagrid('getSelections');
					if (row.length == 1) {
						getData(row[0].id);
					} else {
						$.messager.show({
							title: '系统提示',
							msg: '请选择一行数据进行修改！',
							timeout: 3000,
							showType: 'slide'
						});	
					}
				}
			},
			
			hiddenUpdateDialog: function() {
				$('#userUpdateDialog').dialog('close');
				user.toolbar.resetUpdateForm();
			},
			resetUpdateForm: function() {
				user.userUpdateForm.form('reset');
			},
			
			update: function() {
				if (user.userUpdateForm.form('validate')) {
					$.messager.progress({
						text : '正在处理...'
					});
					$.post('<%=request.getContextPath()%>/stu/UserServlet?command=updateUser', $("#userUpdateForm").serialize(), function(data) {
						if (data == 1) {
							$.messager.show({
								title: '系统提示',
								msg: '修改成功！',
								timeout: 3000,
								showType: 'slide'
							});
							user.toolbar.resetUpdateForm();
							user.userGrid.datagrid('reload');
						} else {
							$.messager.alert('系统提示', '修改失败！', 'error');
						}
						$.messager.progress('close');
						user.toolbar.hiddenUpdateDialog();
					});
				}
			},
			remove: function(id) {
				var doRemove = function(ids){
					$.messager.confirm('提示', '确定要删除吗?', function(r){
						if (r){
							$.post('<%=request.getContextPath()%>/stu/UserServlet?command=deleteUser', {ids: ids.join(',')}, function(data) {
								if (data) {
									$.messager.show({
										title: '系统提示',
										msg: '删除了'+data+'条数据！',
										timeout: 3000,
										showType: 'slide'
									});
									user.userGrid.datagrid('reload');
								} else {
									$.messager.alert('系统提示', '删除失败！', 'error')
								}
								$.messager.progress('close');
							});
						}
					});
				}
				var row = user.userGrid.datagrid('getSelections');
				if (id && row.length<1) {
					var v = [];
					v.push(id);
					doRemove(v);
				} else {
					if (row.length > 0) {
						var ids = [];
						$.each(row, function(i, v) {
							ids.push(v.id);
						});
						doRemove(ids);
					} else {
						$.messager.show({
							title: '系统提示',
							msg: '请选择数据进行删除！',
							timeout: 3000,
							showType: 'slide'
						});	
					}
		 		}
			},
			redo: function() {
				user.userGrid.datagrid('unselectAll');
			},
			close: function(id) {
				var doRemove = function(ids){
					$.messager.confirm('提示', '确定要禁用吗?', function(r){
						if (r){
							$.post('<%=request.getContextPath()%>/stu/UserServlet?command=close', {ids: ids.join(',')}, function(data) {
								if (data) {
									$.messager.show({
										title: '系统提示',
										msg: '禁用了'+data+'条数据！',
										timeout: 3000,
										showType: 'slide'
									});
									user.userGrid.datagrid('reload');
								} else {
									$.messager.alert('系统提示', '禁用失败！', 'error')
								}
								$.messager.progress('close');
							});
						}
					});
				}
				var row = user.userGrid.datagrid('getSelections');
				if (id && row.length<1) {
					var v = [];
					v.push(id);
					doRemove(v);
				} else {
					if (row.length > 0) {
						var ids = [];
						$.each(row, function(i, v) {
							ids.push(v.id);
						});
						doRemove(ids);
					} else {
						$.messager.show({
							title: '系统提示',
							msg: '请选择数据进行删除！',
							timeout: 3000,
							showType: 'slide'
						});	
					}
		 		}
			},
			open: function(id) {
				var doOpen = function(ids){
					$.messager.confirm('提示', '确定要启用吗?', function(r){
						if (r){
							$.post('<%=request.getContextPath()%>/stu/UserServlet?command=open', {ids: ids.join(',')}, function(data) {
								if (data) {
									$.messager.show({
										title: '系统提示',
										msg: '操作了'+data+'条数据！',
										timeout: 3000,
										showType: 'slide'
									});
									user.userGrid.datagrid('reload');
								} else {
									$.messager.alert('系统提示', '启用失败！', 'error')
								}
								$.messager.progress('close');
							});
						}
					});
				}
				var row = user.userGrid.datagrid('getSelections');
				if (id && row.length<1) {
					var v = [];
					v.push(id);
					doOpen(v);
				} else {
					if (row.length > 0) {
						var ids = [];
						$.each(row, function(i, v) {
							ids.push(v.id);
						});
						doOpen(ids);
					} else {
						$.messager.show({
							title: '系统提示',
							msg: '请选择数据进行启用！',
							timeout: 3000,
							showType: 'slide'
						});	
					}
		 		}
			},
			search: function(){
				user.userGrid.datagrid('load', {    
				    role: user.roleSearch.combobox('getValue'),    
				    clazz: user.clazzSearch.combobox('getValue'),
				    state: user.stateSearch.combobox('getValue'),
				    name: user.nameSearch.val()
				}); 
			},
			resetPassword: function(){
				$.messager.confirm('提示', '确定要重置密码吗?', function(r){
					if (r){
						var row = user.userGrid.datagrid('getSelections');
						if (row.length > 0) {
							var ids = [];
							$.each(row, function(i, v) {
								ids.push(v.id);
							});
							$.post('<%=request.getContextPath()%>/stu/UserServlet?command=resetPassword', {ids: ids.join(',')}, function(data) {
								if (data) {
									$.messager.show({
										title: '系统提示',
										msg: '成功重置了'+data+'条密码！',
										timeout: 3000,
										showType: 'slide'
									});
									user.userGrid.datagrid('reload');
								} else {
									$.messager.alert('系统提示', '操作失败！', 'error')
								}
								$.messager.progress('close');
							});
						} else {
							$.messager.show({
								title: '系统提示',
								msg: '请选择数据进行操作！',
								timeout: 3000,
								showType: 'slide'
							});	
						}
					}
				});
			},
		}
	};
	
	$(function(){
		user.init();
	});
</script>
